<template>
    <div>
        <div class="mobileAndPcTitleBox">移动端与PC端预览</div>
        <div class="mobileAndPcBox">
            <div class="mobileBox">
                <div class="mobileContent" v-html="contentData.ca_content"></div>
            </div>
            <div class="pcBox">
                <div class="pcContent" v-html="contentData.ca_content"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {}
        },
        //初始化函数
        mounted() {
            this.initData();
        },
        //计算属性
        computed: {
            ...mapState({
                contentData: state => state.ContentPreviewModule.contentData,
            })
        },
        //组件方法
        methods: {
            // ...mapMutations()
            initData() {
                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.cmsArticleSearch + "/ca_id/" + this.$route.query.ca_id,
                    rs => {
                        console.log(rs);
                        this.$store.commit('ContentPreviewModule/updateContentData', rs.data[0])
                        this.$myLoading.endLoading()
                    }
                )

            },
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';

    .mobileAndPcBox {
        position absolute
        top 85px
        left 10px
        right 10px
        bottom 10px
        background #fff
        display flex

    }

    .mobileAndPcTitleBox {
        width 100%
        height 40px
    }

    .mobileBox{
        width:350px;
        height auto
        box-shadow 0 0 1px #ccc
        overflow auto
        float left


    }

    .mobileBox::-webkit-scrollbar {
        display: none;
    }


    .pcBox {
        /*height 100%*/
        flex 1
        box-shadow 0 0 1px #ccc
        margin-left 15px
        overflow auto
        float left
    }
    .contentCreateTimeAndSource{
        text-align right
        padding-right 10px
    }

    .browseSum{
        text-align right
        padding-right 10px
    }



</style>

<style lang="stylus">
    .contentTitle,.contentShortTitle,.pcContent{
        padding 10px
    }
    .contentTitle,.contentShortTitle,.pcContent img{
        width 100%
        height auto
    }
    .mobileContent{
       padding 10px;
    }
    .mobileContent img{
        width:100%;
    }
</style>